<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>徐理念Blog - 首页</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" th:href="@{/css/home.css}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!--    <style>-->
<!--        /* 限制封面图片大小 */-->
<!--        .article-cover-img {-->
<!--            height: 150px; /* 限制高度 */-->
<!--            object-fit: cover;-->
<!--            width: 100%;-->
<!--        }-->

<!--        /* 调整卡片布局 */-->
<!--        .article-card {-->
<!--            margin-bottom: 1.5rem;-->
<!--        }-->

<!--        /* 分页导航样式优化 */-->
<!--        .pagination {-->
<!--            margin-top: 2rem;-->
<!--            margin-bottom: 2rem;-->
<!--        }-->

<!--        /* 确保分页组件可见 */-->
<!--        .pagination-container {-->
<!--            display: flex;-->
<!--            justify-content: center;-->
<!--            margin: 2rem 0;-->
<!--        }-->
<!--    </style>-->
</head>
<body>
<!-- 头部区域 -->
<header class="blog-header">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <!-- 左侧标题 -->
            <div class="blog-title">
                <h3 class="mb-0">徐理念Blog</h3>
            </div>

            <!-- 中间导航链接 -->
            <nav class="d-none d-md-block">
                <ul class="nav nav-pills">
                    <li class="nav-item">
                        <a class="nav-link" href="/blogHome"><i class="bi bi-house-door"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/articleList"><i class="bi bi-card-text"></i> 全部动态</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/categories"><i class="bi bi-folder"></i> 分类</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/tagList"><i class="bi bi-tags"></i> 标签</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/articleManage"><i class="bi bi-pencil-square"></i> 文章管理</a>
                    </li>
                </ul>
            </nav>

            <!-- 右侧用户信息 -->
            <div class="user-info">
                <div class="dropdown">
                    <a class="d-flex align-items-center text-decoration-none dropdown-toggle"
                       href="#" role="button" data-bs-toggle="dropdown">
                        <div class="user-avatar" th:text="用户">U</div>
                        <span class="d-none d-md-inline" th:text="徐理念">用户名</span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="/profile"><i class="bi bi-person"></i> 个人资料</a></li>
                        <li><a class="dropdown-item" href="/settings"><i class="bi bi-gear"></i> 设置</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="/logout"><i class="bi bi-box-arrow-right"></i> 退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- 主要内容区域 -->
<main class="main-content">
    <div class="container">
        <!-- 移动端导航菜单 -->
        <div class="d-md-none mb-4">
            <div class="card">
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="/" class="btn btn-outline-primary"><i class="bi bi-house-door"></i> 首页</a>
                        <a href="/articleList" class="btn btn-outline-primary active"><i class="bi bi-card-text"></i> 全部动态</a>
                        <a href="/categories" class="btn btn-outline-primary"><i class="bi bi-folder"></i> 分类</a>
                        <a href="/tags" class="btn btn-outline-primary"><i class="bi bi-tags"></i> 标签</a>
                        <a href="/articleManage" class="btn btn-outline-primary"><i class="bi bi-pencil-square"></i> 文章管理</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="mb-0">全部动态</h4>
                    </div>

                    <div class="card-body">
                        <!-- 文章列表 -->
                        <div class="articles-list">
                            <div th:if="${articlePage != null and not #lists.isEmpty(articlePage.records)}">

                                <div th:if="${articlePage != null and not #lists.isEmpty(articlePage.records)}">
                                    <div th:each="article : ${articlePage.records}" class="article-item-wrapper">
                                        <a th:href="@{/articleDetail(id=${article.id})}" class="text-decoration-none">
                                            <div class="card article-card mb-2">
                                                <div class="row g-0">
                                                    <!-- 文章封面 -->
                                                    <div class="col-md-2" th:if="${article.coverImage != null and article.coverImage != ''}">
                                                        <img th:src="${article.coverImage}"
                                                             class="article-cover-img img-fluid"
                                                             alt="文章封面" style="width: 200px">
                                                    </div>

                                                    <!-- 文章内容 -->
                                                    <div th:class="${article.coverImage != null and article.coverImage != '' ? 'col-md-10' : 'col-12'}">
                                                        <div class="card-body h-100 d-flex flex-column">
                                                            <h5 class="card-title">
                                                                <span th:text="${article.title}" class="text-dark">
                                                                    文章标题
                                                                </span>
                                                            </h5>

                                                            <p class="card-text flex-grow-1"
                                                               th:text="${#strings.abbreviate(article.content, 150)}">
                                                                文章摘要
                                                            </p>

                                                            <div class="d-flex justify-content-between align-items-center mt-auto">
                                                                <div class="article-meta">
                                                                    <small class="text-muted">
                                                                        <i class="bi bi-calendar"></i>
                                                                        <span th:text="${#temporals.format(article.createTime, 'yyyy-MM-dd HH:mm')}">
                                                                            发布时间
                                                                        </span>
                                                                        <span class="mx-2">•</span>
                                                                        <i class="bi bi-eye"></i>
                                                                        <span th:text="${article.viewCount ?: 0}">0</span> 浏览
                                                                        <span class="mx-2">•</span>
                                                                        <i class="bi bi-heart"></i>
                                                                        <span th:text="${article.likeCount ?: 0}">0</span> 点赞
                                                                    </small>
                                                                </div>

                                                                <div class="btn-group" role="group">
                                                                    <span class="btn btn-outline-primary btn-sm">
                                                                        <i class="bi bi-eye"></i> 阅读
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>


                                <!-- 分页组件 -->
                                <div class="pagination-container">
                                    <nav aria-label="文章分页" th:if="${articlePage.pages > 1}">
                                        <ul class="pagination">
                                            <!-- 上一页 -->
                                            <li class="page-item" th:classappend="${articlePage.current == 1} ? 'disabled'">
                                                <a class="page-link"
                                                   th:href="@{/articleList(pageNum=${articlePage.current - 1})}"
                                                   aria-label="Previous">
                                                    <span aria-hidden="true">&laquo;</span>
                                                </a>
                                            </li>

                                            <!-- 页码 -->
                                            <li class="page-item"
                                                th:each="i : ${#numbers.sequence(1, articlePage.pages)}"
                                                th:classappend="${i == articlePage.current} ? 'active'">
                                                <a class="page-link" th:href="@{/articleList(pageNum=${i})}" th:text="${i}">1</a>
                                            </li>

                                            <!-- 下一页 -->
                                            <li class="page-item" th:classappend="${articlePage.current == articlePage.pages} ? 'disabled'">
                                                <a class="page-link"
                                                   th:href="@{/articleList(pageNum=${articlePage.current + 1})}"
                                                   aria-label="Next">
                                                    <span aria-hidden="true">&raquo;</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>

                            <!-- 无文章时显示 -->
                            <div th:if="${articlePage == null or #lists.isEmpty(articlePage.records)}" class="text-center py-5">
                                <i class="bi bi-file-earmark-text" style="font-size: 3rem; color: #ccc;"></i>
                                <h5 class="mt-3">暂无文章</h5>
                                <p class="text-muted">还没有发布任何文章</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 底部区域 -->
<footer class="blog-footer">
    <div class="container">
        <div class="row">
            <div class="col-md-4 mb-4 mb-md-0">
                <h5>联系我</h5>
                <ul class="list-unstyled">
                    <li class="mb-2">
                        <i class="fab fa-qq me-2"></i>
                        <strong>QQ:</strong> <span>123456789</span>
                    </li>
                    <li class="mb-2">
                        <i class="bi bi-envelope me-2"></i>
                        <strong>Email:</strong> <span>example@example.com</span>
                    </li>
                    <li>
                        <i class="bi bi-chat-dots me-2"></i>
                        <strong>微信:</strong> <span>xuln_blog</span>
                    </li>
                </ul>
            </div>
            <div class="col-md-4 mb-4 mb-md-0">
                <h5>关于博客</h5>
                <p>这是一个个人技术博客，分享编程经验、技术心得和生活感悟。</p>
            </div>
            <div class="col-md-4">
                <h5>友情链接</h5>
                <ul class="list-unstyled">
                    <li><a href="#" class="text-decoration-none">GitHub</a></li>
                    <li><a href="#" class="text-decoration-none">SegmentFault</a></li>
                    <li><a href="#" class="text-decoration-none">掘金</a></li>
                </ul>
            </div>
        </div>
        <hr>
        <div class="text-center">
            <p class="mb-0">&copy; 2022 徐理念Blog. All rights reserved.</p>
        </div>
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
